<template>
  <van-tree-select
    :items="items"
    :main-active-index.sync="active"
    style="overflow: hidden;"
    :style="{ height }"
  >
    <template #content>
      <ul class="category__list" v-if="active === 0">
        <li class="category__list-item">
          <div class="category__list-title">畅销星品</div>
          <ul class="category__list-sublist">
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/9b025db966cc4ecea102913da33f88091532519165980jk12ccg812567.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="口红"
                />
                <p class="category__list-subtxt">口红</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/a9dc57196224482682d5066e4e69a6af1530779626254jj8anz0112321.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="面膜"
                />
                <p class="category__list-subtxt">面膜</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jpux5w3273null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="面膜大赏"
                />
                <p class="category__list-subtxt">面膜大赏</p>
              </li>
            </div>
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/06c2130ab9b048d39d144480764ee75d1525850606881jgys1zbe11840.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="防晒"
                />
                <p class="category__list-subtxt">防晒</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/imq35qx294_800_800.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="洗面奶"
                />
                <p class="category__list-subtxt">洗面奶</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jpux32bk71null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="口红种草"
                />
                <p class="category__list-subtxt">口红种草</p>
              </li>
            </div>
          </ul>
        </li>
        <li class="category__list-item">
          <div class="category__list-title">美容护肤</div>
          <ul class="category__list-sublist">
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/9b025db966cc4ecea102913da33f88091532519165980jk12ccg812567.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="口红"
                />
                <p class="category__list-subtxt">口红</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/a9dc57196224482682d5066e4e69a6af1530779626254jj8anz0112321.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="面膜"
                />
                <p class="category__list-subtxt">面膜</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jpux5w3273null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="面膜大赏"
                />
                <p class="category__list-subtxt">面膜大赏</p>
              </li>
            </div>
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/06c2130ab9b048d39d144480764ee75d1525850606881jgys1zbe11840.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="防晒"
                />
                <p class="category__list-subtxt">防晒</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/imq35qx294_800_800.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="洗面奶"
                />
                <p class="category__list-subtxt">洗面奶</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jpux32bk71null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="口红种草"
                />
                <p class="category__list-subtxt">口红种草</p>
              </li>
            </div>
          </ul>
        </li>
                <li class="category__list-item">
          <div class="category__list-title">彩妆香氛</div>
          <ul class="category__list-sublist">
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/9b025db966cc4ecea102913da33f88091532519165980jk12ccg812567.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="口红"
                />
                <p class="category__list-subtxt">口红</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/a9dc57196224482682d5066e4e69a6af1530779626254jj8anz0112321.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="面膜"
                />
                <p class="category__list-subtxt">面膜</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jpux5w3273null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="面膜大赏"
                />
                <p class="category__list-subtxt">面膜大赏</p>
              </li>
            </div>
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/06c2130ab9b048d39d144480764ee75d1525850606881jgys1zbe11840.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="防晒"
                />
                <p class="category__list-subtxt">防晒</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/imq35qx294_800_800.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="洗面奶"
                />
                <p class="category__list-subtxt">洗面奶</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jpux32bk71null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="口红种草"
                />
                <p class="category__list-subtxt">口红种草</p>
              </li>
            </div>
          </ul>
        </li>

      </ul>
      <ul class="category__list" v-if="active === 1">
        <li class="category__list-item">
          <div class="category__list-title">育儿驿站</div>
          <ul class="category__list-sublist">
            <div class="category__list-subitemline">
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jw23dnwk23null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="家有萌宝"
                />
                <p class="category__list-subtxt">家有萌宝</p>
              </li>
              <li class="category__list-subitem">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/jw5ph2lr39null.jpg?x-oss-process=image/resize,w_240,h_240/quality,q_75/format,webp"
                  alt="母婴正品"
                />
                <p class="category__list-subtxt">母婴正品</p>
              </li>
            </div>
          </ul>
        </li>
      </ul>
    </template>
  </van-tree-select>
</template>

<script>
// vue diff算法
// 懒惰行为
// 如果标签没有更换 div ul li 没有更新，换是不是数据
// mounted一开始没有数据  高度可以为很小，所以不能拖动
// 封装成一个组件 diff 如果key不同，则重新创建此组件  mounted执行  :key=“0”

// 你现在的拖动在组件中，所以的只执行一次，更新到update生命周期，数据有变化，就执行

import Vue from "vue";
import BetterScroll from "better-scroll";

export default {
  data() {
    return {
      active: 0,
      items: [],
      height: 0,
      scroll: null,
      goods: [],
    };
  },
  update() {
    this.scroll = new BetterScroll(".van-tree-select", {
      // 上拉事件
      pullUpLoad: true,
      // 下拉
      pullDownRefresh: true,
      click: true,
      scrollY: true,
      scrollbar: {
        fade: true,
        interactive: false, // 1.8.0 新增
      },
    });
    // 上拉事件
    this.scroll.on("pullingUp", () => {
      //console.log("上拉了");
      //this.getData(2);
      this.scroll.finishPullUp();
    });
    // 下拉
    this.scroll.on("pullingDown", () => {
      //console.log("刷新一下");
      //this.getData(1);
      this.scroll.finishPullDown();
    });
  },
  mounted() {
    // this.getData();

    let url = "http://127.0.0.1:8080/data/shop.json";
    this.$axios.get(url).then((ret) => {
      this.items = ret.data;
      //console.log(this.items)
    });

    let uri = "http://127.0.0.1:8080/data/class.json";
    this.$axios.get(uri).then((ret) => {
      this.goods = ret.data;
      //console.log(this.goods)
    });

    this.height = document.documentElement.clientHeight - 45 + "px";
  },
  beforeDestroy() {
    // 组件销毁之前要清掉所创建的动画
    this.scroll = null;
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.van-tree-select {
  padding-bottom: 50px;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;

  // height: 100%;
}
.van-sidebar {
  // overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 50px;
  z-index: 2;
  width: 100px;
  background: #fff;
  box-shadow: inset -1px 0 0 0 #ddd;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .van-sidebar-item {
    display: block;
    position: relative;
    overflow: hidden;
    flex: 0 0 50px;
    width: 100%;
    // height: 50px;
    // line-height: 50px;
    align-items: center;
    color: #666;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    box-shadow: inset -1px 0 0 0 #ddd;
    &:hover {
      color: red;
    }
  }
}

.category__list {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 10px 10px 10px 100px;
  // margin-bottom: 43px;
  .category__list-item {
    padding-bottom: 7px;
    border-bottom: 0.5px solid #f0f0f0;
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    text-size-adjust: 100%;
    display: list-item;
    .category__list-title {
      font-size: 14px;
      line-height: 30px;
      height: 30px;
      margin-bottom: 8px;
      font-family: PingFangSC-Semibold;
      color: #333;
      letter-spacing: 0;
      font-weight: 700;
      padding-left: 15px;
    }
    .category__list-sublist {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      overflow: hidden;
      outline: none;
      box-sizing: border-box;
      .category__list-subitemline {
        display: flex;
        flex: 1;
        flex-wrap: nowrap;
        padding-left: 12px;
        overflow: hidden;
        .category__list-subitem {
          padding: 0 4px;
          img {
            width: 76px;
            height: 76px;
            padding: 0 4px;
          }
          .category__list-subtxt {
            text-align: center;
            font-size: 12px;
            color: #1e1e1e;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            margin-bottom: 14px;
          }
        }
      }
    }
  }
}
</style>
